<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!-- <p>
            $ {{ price.toFixed(2) }}
        </p>

        <p>
            $ {{ price.toFixed(2) }}
        </p>

        <p>
            $ {{ price.toFixed(2) }}
        </p> -->

        <!-- <p>
            {{ fn() }}
        </p>

        <p>
            {{ fn() }}
        </p>

        <p>
            {{ fn() }}
        </p> -->
        
        <input v-model.number="price" type="text">

        <h3>
            {{ price }}
        </h3>

        <p>
            {{ newPrice }}
        </p>

        <p>
            {{ newPrice }}
        </p>

        <p>
            {{ newPrice }}
        </p>
        
    </div>

    <script src="./vue.min.js"></script>
    <script>
         new Vue({
            el: "#app",
            data: {
                price: 100
            },
            // 计算属性  
            // 1. 缓存
            // 2. 依赖的属性发生改变后，会重新进行计算（）
            // $100.00
            computed: {
                newPrice() {
                    console.log('我是计算属性，被执行了')
                    return '$' + this.price.toFixed(4)
                }
            },
            methods: {
                // fn() {
                //     console.log('我是函数，被执行了', this)
                //     return '$' + this.price.toFixed(3)
                // }
            },
            // watch
        })
    </script>
</body>
</html>